<template>
  <li>
    <header>组件基础</header>
    <ul>
      <li>
        基本示例
        <button-counter/>
      </li>
      <li>
        组件的复用
        <ol>
          <li>data必须是一个函数</li>
        </ol>
        <button-counter/>
        <button-counter/>
        <button-counter/>
      </li>
      <li>组件的组织</li>
      <li>
        通过prop向子组件传递数据
        <blog-post title="我的vue旅程"/>
        <blog-post title="Vue博客"/>
        <blog-post title="为什么Vue这么有趣"/>
        <hr>
        <blog-post1 v-for="(item, index) in posts" :key="index" v-bind:title="item.title"/>
      </li>
      <li>
        单个根元素
        <blog-post2
          v-bind:id="post2.id"
          v-bind:title="post2.title"
          v-bind:publishedAt="post2.publishedAt"
          v-bind:comments="post2.comments"
        />
        <hr>
        <blog-post3 v-for="(item, index) in post3" :key="index" v-bind:post="item"/>
      </li>
      <li>
        监听子组件事件
        <ol>
          <li>使用事件抛出一个值</li>
          <li>在组件上使用v-model</li>
        </ol>
        <div v-bind:style="{fontSize:postFontSize + 'em'}">
          <blog-post4
            v-for="(item, index) in post4"
            :key="index"
            v-bind:post="item"
            v-on:enlarge-text="postFontSize+=0.1"
          />
          <hr>
          <blog-post5 v-bind:post="post4[1]" v-on:enlarge-text="postFontSize+=$event"/>
          <hr>
          <blog-post5 v-bind:post="post4[2]" v-on:enlarge-text="onEnlargeText"/>
        </div>
        <hr>
      </li>
      <li>
        通过插槽分发内容
        <UseSlot/>
      </li>
      <li>
        动态组件
        <component :is="currentTabComponent"/>
      </li>
      <li>
        解析DOM模板时的注意事项
        <table>
          <tr is="BlogPostRow"/>
        </table>
      </li>
    </ul>
  </li>
</template>

<script>
import ButtonCounter from "./samples/ButtonCounter";
import BlogPost from "./samples/BlogPost";
import BlogPost1 from "./samples/BlogPost1";
import BlogPost2 from "./samples/BlogPost2";
import BlogPost3 from "./samples/BlogPost3";
import BlogPost4 from "./samples/BlogPost4";
import BlogPost5 from "./samples/BlogPost5";
import UseSlot from "./samples/UseSlot";
import BlogPostRow from "./samples/BlogPostRow";

export default {
  name: "ComponentBasics",
  components: {
    ButtonCounter,
    BlogPost,
    BlogPost1,
    BlogPost2,
    BlogPost3,
    BlogPost4,
    BlogPost5,
    UseSlot,
    BlogPostRow
  },
  data() {
    return {
      posts: [
        { id: 1, title: "我的vue旅程" },
        { id: 2, title: "Vue博客" },
        { id: 3, title: "为什么Vue这么" }
      ],
      post2: {
        id: 99,
        publishedAt: "匿名",
        comments: "引用..."
      },
      post3: [
        { id: 1, title: "我的vue旅程", content: "Blog Post 3..." },
        { id: 2, title: "Vue博客", content: "Blog Post 3..." },
        { id: 3, title: "为什么Vue这么有趣", content: "Blog Post 3..." }
      ],
      post4: [
        { id: 1, title: "我的vue旅程", content: "Blog Post 4..." },
        { id: 2, title: "Vue博客", content: "Blog Post 4..." },
        { id: 3, title: "为什么Vue这么有趣", content: "Blog Post 4..." }
      ],
      postFontSize: 1,
      currentTabComponent: ButtonCounter
    };
  },
  methods: {
    onEnlargeText(event) {
      this.postFontSize += event;
    }
  }
};
</script>